<template>
	<div :class="containerClass">
		<slot name="topTab" />
		<div v-if="type === 'list'">
			<!--  搜索插槽-->
			<div ref="queryRef" class="params">
				<slot name="query" />
			</div>
			<!--内容区域插槽-->
			<div ref="contentRef" class="content">
				<slot name="content" />
			</div>
		</div>
		<!-- 非表单插槽-->
		<div v-else>
			<slot name="nonListContent" />
		</div>
		<slot />
	</div>
</template>

<style lang="scss" scoped>
.agent-list-spetify {
	padding-top: 10px;
}
</style>

<script>
const dependenComponents = {
	innerTab: 36,
	innerTabS: 51,
	topTab: 125,
	spetify: 44,
	reviewTab: 54,
	reviewBtn: 45,
	wrap: 61,
	wrapInnerTab: 105,
	addBtn: 39,
	noParams: -27,
	cardTableDetails: 118
}
const classState = {
	default: 'game-container',
	agentList: 'view-container dealer-container agent-list-spetify',
	wrapInner: 'game-container wrap-inner-spetify',
	wrapInnerWOC: 'wrap-inner-spetify'
}
export default {
	name: 'MainContent',
	props: {
		classType: { type: String, default: 'default' },
		type: { type: String, default: 'list' },
		otherDependenComponents: { type: Array, default: () => [] },
		tableHeight: { type: [String, Number], default: 480 }
	},
	data() {
		return {
			containerClass: this.getContainerClasses()
		}
	},
	watch: {
		tableHeight: function() {
			this._initMainContent()
		}
	},
	created() {
		this._initMainContent()
	},
	destroyed() {
		if (this.type === 'list') {
			window.removeEventListener('resize', this.calculateTableHeight)
		}
	},
	methods: {
		// 初始化
		_initMainContent() {
			if (this.type === 'list') {
				this.$nextTick(() => {
					this.calculateTableHeight()
					window.addEventListener('resize', this.calculateTableHeight)
				})
			}
		},
		// 计算table区域显示内容高度
		calculateTableHeight() {
			const CLIENT_HEIGHT = document.body.clientHeight
			const QUERY_CLIENT_HEIGHT = this.$refs.queryRef?.clientHeight
			const OTHER_HEIGHT = this.otherDependenComponents.reduce(
				(prev, item) => prev + dependenComponents[item],
				230
			)
			const tableHeight =
				CLIENT_HEIGHT - QUERY_CLIENT_HEIGHT - OTHER_HEIGHT
			this.$emit('update:tableHeight', tableHeight)
		},
		getContainerClasses() {
			return this?.classType
				? classState[this.classType]
				: classState.default
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap-inner-spetify {
	margin: 0;
}
</style>
